<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css" />
	</head>
	<style type="text/css">
		header {
			display: none;
		}
		
		body {
			background: #fff;
		}
		
		.mui-bar-tab {
			border-top: 1px solid #ECECEA;
			-webkit-box-shadow: none;
			box-shadow: none
		}
		
		.mui-bar-tab .mui-tab-item.mui-active {
			color: #21B0FD;
		}
		
		.homeicon {
			display: block;
			margin: 0 auto;
			position: relative;
			z-index: 20;
			top: 3px;
			height: 24px;
			padding-top: 4px;
			margin-bottom: 2px;
		}
		
		.mui-tab-label {
			font-size: 12px;
		}
	</style>

	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 id="title" class="mui-title">首页</h1>
		</header>
		<nav class="mui-bar mui-bar-tab">
			<a id="defaultTab" class="mui-tab-item mui-active" href="home.html">
				<img src="../../imges/Group 1494.png" class="homeicon" />
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" href="bookshelf.html">
				<img src="../../imges/Group 1492.png" class="homeicon" />
				<span class="mui-tab-label">我的书架</span>
			</a>
			<a id="threeTab" class="mui-tab-item" href="../stacks/Recommended.html">
				<img src="../../imges/Group 1491.png" class="homeicon" />
				<span class="mui-tab-label">书库</span>
			</a>
			<a class="mui-tab-item" href="my.html">
				<img src="../../imges/Group 1490.png" class="homeicon" />
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>

		<script src="../../js/mui.min.js"></script>
		<script src="../../js/libs/zepto_1.1.3.js"></script>
		<script>
			//mui初始化
			mui.init({
				gestureConfig: {
					doubletap: true,
				},
			});

//var wv = plus.webview.currentWebview('../loginregistration/login.html');
//					// 关闭侧滑返回功能
//					wv.setStyle({
//						'popGesture': 'none'
//					});

			//             function renovates(){
			////                       document.location.reload();
			//                  alert('dddd')
			//}
			//             $("#bb").on("tap",function(){
			//             	  alert("ddd")
			//             })

			//创建子页面，首个选项卡页面显示，其它均隐藏；
			mui.plusReady(function() {
				
//				console.log(plus.webview.currentWebview().id)
				var data = JSON.parse(localStorage.getItem("data"));
				if(data == null) {
					//location.href = "../loginregistration/login.html"
					mui.openWindow({
						url: "../loginregistration/login.html",
						id: "login"
					})
				}
				self = plus.webview.currentWebview();
				var temp = {};
				var self;
				var subpages = ['home.html', 'bookshelf.html', '../stacks/Recommended.html', 'my.html'];
				var subpage_style = {
					top: '0px',
					bottom: '50px'
				};
				var aniShow = {};
				var createdSub = [1, 0, 0, 0];
				var sub = plus.webview.create(subpages[0], subpages[0], {
					top: '0px',
					bottom: '50px'
				});
				temp[subpages[0]] = "true";
				mui.extend(aniShow, temp);
				self.append(sub);

				if(mui.os.android) {
					$('#header').hide();
				}
				//当前激活选项
				var activeTab = subpages[0];
				var title = document.getElementById('title');
				//选项卡点击事件
				mui('.mui-bar-tab').on('tap', 'a', function(e) {
					subpages = ['home.html', 'bookshelf.html', '../stacks/Recommended.html', 'my.html'];
					//					window.location.href = "bookshelf.html"; 			

					var targetTab = this.getAttribute('href');
					if(targetTab == activeTab) {
						return;
					}
					var imgArr = {
						gold: [
							"Group 1493.png",
							"Group 1492.png",
							"Group 1491.png",
							"Group 1490.png"
						],
						red: [
							"Group 1494.png",
							"Group 1495.png",
							"Group 1496.png",
							"Group 1497.png"
						]
					} //selected
					var currentClickTab = $(this);
					var i = currentClickTab.index();
					//更换tab图标
					//				console.log('this.index:' + i);
					var sele = $(".mui-tab-item.mui-active");
					//				console.log('sele:' + sele.index());

					var goldSrc = "../../imges/" + imgArr.gold[sele.index()];
					var redSrc = "../../imges/" + imgArr.red[i];
					sele.find("img").attr("src", goldSrc);
					currentClickTab.find("img").attr("src", redSrc);
					currentClickTab.addClass("mui-active").siblings().removeClass("mui-active");

					if(createdSub[i] == 0) {
						var temp = {};
						var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
						temp[subpages[i]] = "true";
						mui.extend(aniShow, temp);
						self.append(sub);
						createdSub[i] = 1;
					}
					if(i == 3 || i == 0) {
						plus.webview.getWebviewById(subpages[i]).setStyle({
							top: '0px'
						});
						if(mui.os.android) {
							$('#header').hide();
							$(".mui-bar-nav ~ .mui-content .mui-pull-top-pocket").css("top", "0px");

						}
					} else {
						if(mui.os.android) {
							$('#header').show();
							$(".mui-bar-nav ~ .mui-content .mui-pull-top-pocket").css("top", "44px");
						}
					}
					title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;

					/*if(i == 1) {
						var load = plus.webview.getWebviewById("bookshelf.html");
						var loada = plus.webview.getWebviewById("../stacks/empty.html");
						mui.fire(load, "index");
						mui.fire(loada, "empty")
					}*/

//					if(i == 2) {
//						var go = plus.webview.getWebviewById("../stacks/nominate.html")
//						mui.fire(go, "Recommended")
//					}
//*/
					var wv = plus.webview.currentWebview('../loginregistration/login.html');
					// 关闭侧滑返回功能
					wv.setStyle({
						'popGesture': 'none'
					});

					//更换标题
					//显示目标选项卡
					//若为iOS平台或非首次显示，则直接显示
					if(mui.os.ios || aniShow[targetTab]) {
						plus.webview.show(targetTab);
					} else {
						//否则，使用fade-in动画，且保存变量
						var temp = {};
						temp[targetTab] = "true";
						mui.extend(aniShow, temp);
						plus.webview.show(targetTab, "fade-in", 300);
					}
					//隐藏当前;
					plus.webview.hide(activeTab);
					//更改当前活跃的选项卡
					activeTab = targetTab;
				});
			});

			//	document.getElementById("mui-content").addEventListener('mui-content',function(e){ e.stopPropagation(); });

			var first = null;
			mui.back = function() {
				//首次按键，提示‘再按一次退出应用’
				if(!first) {
					first = new Date().getTime();
					mui.toast('再按一次退出应用');
					setTimeout(function() {
						first = null;
					}, 1000);
				} else {
					if(new Date().getTime() - first < 1000) {
						plus.runtime.quit();
					}
				}

			};

			//自定义事件，模拟点击“首页选项卡”
			document.addEventListener('gohome', function() {
				var threeTab = document.getElementById("threeTab");
				//模拟首页点击
				mui.trigger(threeTab, 'tap');
				//切换选项卡高亮
				var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
				if(threeTab !== current) {
					current.classList.remove('mui-active');
					threeTab.classList.add('mui-active');
				}
			});

			document.addEventListener('goRecommended', function() {
				var threeTab = document.getElementById("threeTab");
				//模拟首页点击
				mui.trigger(threeTab, 'tap');
				//切换选项卡高亮
				var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
				if(threeTab !== current) {
					current.classList.remove('mui-active');
					threeTab.classList.add('mui-active');
				}
			});

			//			window.addEventListener("jump",function(){
			//					alert(333);
			//				})
		</script>
	</body>

</html>